@import './normalize.css';

$darkThemeColor: #0b74e4; // 主题色
$darkBgColor: #000000; // 背景色
$darkBgFirColor: #262626; // 色1
$darkBgSecColor: #595959; // 色2
$darkBgThrColor: #434343; // 色3
$darkBgFouColor: #f0f0f0; // 色4
$darkTextColor: #ffffff;
$darkActiveColor: #0f79eb;
$darkBorderColor: #141414;

@select-background: #f0f2f5;
@select-dropdown-bg: #fff;

:root {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

html {
  scrollbar-width: thin !important;
}

// 滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}
::-webkit-scrollbar-thumb {
  background-color: #b4b4b4;
}

// antd表格样式
.ant-table-thead > tr > th {
  height: 40px;
}
.ant-table-body {
  scrollbar-width: thin;
  -webkit-scrollbar-width: thin;

  tr:nth-child(2n + 1) {
    background-color: #fafafa;
  }

  tr > td {
    height: 40px;
  }
}

// antd layout样式
.ant-layout-content {
  line-height: unset !important;
  text-align: start !important;
}

// loading样式
.ant-spin {
  max-height: 100vh !important;
  background: rgba(0, 0, 0, 0.4);
}
.ant-spin-text {
  text-shadow: none !important;
}

// 封装后的表格样式
.mtable {
  width: 100%;
  height: 100%;

  .ant-spin-container {
    display: flex;
    flex-direction: column;
  }

  .mserach {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .form-item {
      // width: 250px;
      display: flex;
      flex-direction: row;
      margin: 5px 15px;

      .ant-form-item-label {
        font-weight: bold;

        label {
          color: #333333 !important;
        }
      }

      .ant-input {
        width: 180px;
      }
    }
  }

  .mtable-con {
    flex: 1;
    // height: 500px;
    overflow: hidden;
  }
}

.dark {
  // 覆盖Select组件的基础样式

  .ant-select-dropdown {
    background: $darkBgSecColor !important;
  }

  .ant-select-item-option-selected {
    background: $darkBgFirColor !important;
  }

  .ant-select-item-option-active {
    background: $darkBgThrColor !important;
  }

  .ant-select-arrow {
    color: $darkBgFirColor !important;
  }

  .ant-pagination-item-ellipsis {
    color: $darkTextColor !important;
  }

  .ant-table-thead > tr > th {
    color: $darkTextColor;
    background-color: $darkBgSecColor;
  }

  .ant-table-body {
    tr:nth-child(2n + 1) {
      background-color: $darkBgSecColor;
    }
  }

  .mtable {
    .mserach {
      .form-item {
        .ant-form-item-label {
          label {
            color: $darkTextColor !important;
          }
        }
      }
    }
  }
}
